﻿@using Telerik.Web.Mvc.UI;
@using SmartStore.Core.Search.Facets;
@model SpecificationAttributeModel

@Html.ValidationSummary(false)
@Html.HiddenFor(model => model.Id)
@Html.SmartStore().TabStrip().Name("specificationattribute-edit").Style(TabsStyle.Material).Items(x =>
{
    x.Add().Text(T("Admin.Catalog.Attributes.SpecificationAttributes.Info").Text).Content(TabInfo()).Selected(true);
    x.Add().Text(T("Admin.Catalog.Attributes.SpecificationAttributes.Options").Text).Content(TabOptions());
    
    //generate an event
    EngineContext.Current.Resolve<IEventPublisher>().Publish(new TabStripCreated(x, "specificationattribute-edit", this.Html, this.Model));
})

@helper TabInfo()
{
	if (Model.Id != 0)
	{
		<table class="adminContent">
			<tr>
				<td class="adminTitle">
					@Html.SmartLabelFor(model => model.Id)
				</td>
				<td class="adminData">
					@Html.TextBoxFor(model => model.Id, new { @readonly = "readonly", @class = "form-control-plaintext" })
					@Html.ValidationMessageFor(model => model.Id)
				</td>
			</tr>
		</table>
	}

    @(Html.LocalizedEditor<SpecificationAttributeModel, SpecificationAttributeLocalizedModel>("specificationattribute-localized",
    @<table class="adminContent">
        <tr>
            <td class="adminTitle">
                @Html.SmartLabelFor(model => model.Locales[item].Name)
            </td>
            <td class="adminData">
				@*IMPORTANT: Do not delete, this hidden element contains the id to assign localized values to the corresponding language *@
				@Html.HiddenFor(model => model.Locales[item].LanguageId)

                @Html.EditorFor(model => Model.Locales[item].Name)
                @Html.ValidationMessageFor(model => model.Locales[item].Name)
            </td>
        </tr>
        <tr>
            <td class="adminTitle">
                @Html.SmartLabelFor(model => model.Locales[item].Alias)
            </td>
            <td class="adminData">
                @Html.EditorFor(model => Model.Locales[item].Alias)
                @Html.ValidationMessageFor(model => model.Locales[item].Alias)
            </td>
        </tr>
    </table>
    ,
    @<table class="adminContent">
        <tr>
            <td class="adminTitle">
                @Html.SmartLabelFor(model => model.Name)
            </td>
            <td class="adminData">
                @Html.EditorFor(model => model.Name)
                @Html.ValidationMessageFor(model => model.Name)
            </td>
        </tr>
        <tr>
            <td class="adminTitle">
                @Html.SmartLabelFor(model => model.Alias)
            </td>
            <td class="adminData">
                @Html.EditorFor(model => model.Alias)
                @Html.ValidationMessageFor(model => model.Alias)
            </td>
        </tr>
    </table>
    ))
    <table id="SpecificationAttributeTable" class="adminContent">
        <tr>
            <td class="adminTitle">
                @Html.SmartLabelFor(model => model.DisplayOrder)
            </td>
            <td class="adminData">
                @Html.EditorFor(model => model.DisplayOrder)
                @Html.ValidationMessageFor(model => model.DisplayOrder)
            </td>
        </tr>
		<tr>
			<td class="adminTitle">
				@Html.SmartLabelFor(model => model.ShowOnProductPage)
			</td>
			<td class="adminData">
				@Html.EditorFor(model => model.ShowOnProductPage)
				@Html.ValidationMessageFor(model => model.ShowOnProductPage)
			</td>
		</tr>
		<tr>
			<td class="adminTitle">
				@Html.SmartLabelFor(model => model.AllowFiltering)
			</td>
			<td class="adminData">
				@Html.EditorFor(model => model.AllowFiltering)
				@Html.ValidationMessageFor(model => model.AllowFiltering)
			</td>
		</tr>
		<tr>
			<td class="adminTitle">
				@Html.SmartLabelFor(model => model.FacetTemplateHint)
			</td>
			<td class="adminData">
				@Html.DropDownListFor(model => model.FacetTemplateHint, Model.FacetTemplateHint.ToSelectList().ToList())
				@Html.ValidationMessageFor(model => model.FacetTemplateHint)
			</td>
		</tr>
		<tr class="facet-sorting">
			<td class="adminTitle">
				@Html.SmartLabelFor(model => model.FacetSorting)
			</td>
			<td class="adminData">
				@Html.DropDownListFor(model => model.FacetSorting, Model.FacetSorting.ToSelectList().ToList())
				@Html.ValidationMessageFor(model => model.FacetSorting)
			</td>
		</tr>
        <tr>
            <td class="adminTitle">
                @Html.SmartLabelFor(model => model.IndexOptionNames)
            </td>
            <td class="adminData">
                @Html.EditorFor(model => model.IndexOptionNames)
                @Html.ValidationMessageFor(model => model.IndexOptionNames)
            </td>
        </tr>
    </table>

	<script type="text/javascript">
		$(document).ready(function () {

			// Facet template hint.
			$('#@(Html.FieldIdFor(x => x.FacetTemplateHint))').change(function () {
				var sorting = $(this).val() !== '@((int)FacetTemplateHint.NumericRange)';
				$('#SpecificationAttributeTable').find('.facet-sorting').toggle(sorting);
			}).trigger('change');

		});
	</script>
}

@helper TabOptions()
{
	if (Model.Id > 0)
	{
		<div>
			@(Html.Telerik().Grid<SpecificationAttributeOptionModel>()
				.Name("specificationattributeoptions-grid")
				.DataKeys(x =>
				{
					x.Add(y => y.Id).RouteKey("optionId");
					x.Add(y => y.SpecificationAttributeId).RouteKey("specificationAttributeId");
				})
				.Columns(columns =>
				{
					columns.Bound(x => x.Name)
						.Width("50%");
					//TODO display localized values here
					columns.Bound(x => x.Alias);
					columns.Bound(x => x.NumberValue)
						.Width(180)
						.Centered();
					columns.Bound(x => x.DisplayOrder)
						.Width(180)
						.Centered();
					columns.Command(commands =>
					{
						commands.Custom("edit-spec-attr").Text(T("Common.Edit"));
						commands.Delete().Localize(T);
					})
					.HtmlAttributes(new { align = "right" });
				})
				.ToolBar(commands => commands.Template(SpecificationAttributeOptionGridCommands))
				.DataBinding(dataBinding =>
					dataBinding.Ajax().Select("OptionList", "SpecificationAttribute", new { specificationAttributeId = Model.Id })
					.Delete("OptionDelete", "SpecificationAttribute"))
				.EnableCustomBinding(true))
		</div>
	}
	else
	{
        @T("Admin.Catalog.Attributes.SpecificationAttributes.Options.SaveBeforeEdit")
    }
}

@helper SpecificationAttributeOptionGridCommands(Grid<SpecificationAttributeOptionModel> grid)
{
	<button type="submit" id="btnAddNewOption" name="btnAddNewOption" class="btn btn-below"
			onclick="javascript:openPopup('@(Url.Action("OptionCreatePopup", "SpecificationAttribute", new { specificationAttributeId = Model.Id, btnId = "btnRefresh", formId = "specificationattribute-form" }))'); return false;">
		<i class="fa fa-plus"></i>
		<span>@T("Admin.Catalog.Attributes.SpecificationAttributes.Options.AddNew")</span>
	</button>
	<input type="submit" id="btnRefresh" name="btnRefresh" class="d-none" />
}

<script type="text/javascript">
	$(document).ready(function () {
		$('#btnRefresh').click(function () {
			//refresh grid
			var optionsGrid = $("#specificationattributeoptions-grid");
			optionsGrid.data('tGrid').ajaxRequest();

			//return false to don't reload a page
			return false;
		});

		$('#specificationattributeoptions-grid').on('click', '.t-grid-edit-spec-attr', function (e) {
			e.preventDefault();
			var grid = $('#specificationattributeoptions-grid').data('tGrid');
			var tr = $(this).closest('tr');
			var id = grid.dataItem(tr).Id;
			var href = "@Url.Content("~/Admin/SpecificationAttribute/OptionEditPopup/")" + id + "?btnId=btnRefresh&formId=specificationattribute-form";
			
			openPopup(href);

			return false;
		});
	});
</script>